<script lang="ts" setup>
import { useConfigStore } from '@/stores/config'
const { input, target } = storeToRefs(useConfigStore())
const output: Set<string> = reactive(new Set())
const isStart = ref(false)
const output_end = computed(() => [...output].sort((a, b) => a!.length - b!.length))

let workers: Worker[] = []
function start() {
  if (isStart.value) {
    isStart.value = false
    workers.forEach((e) => e.terminate())
    workers = []
    return
  }
  isStart.value = true
  output.clear()
  workers = [
    new Worker(new URL('@/utils/point24-Default.ts', import.meta.url)),
    new Worker(new URL('@/utils/point24-BitwiseNOT.ts', import.meta.url)),
    new Worker(new URL('@/utils/point24-UnaryNegation.ts', import.meta.url)),
    new Worker(new URL('@/utils/point24-Termial.ts', import.meta.url)),
    new Worker(new URL('@/utils/point24-SquareRoot.ts', import.meta.url)),
    new Worker(new URL('@/utils/point24-CubeRoot.ts', import.meta.url))
  ]
  let count = 0
  workers.forEach((worker) => {
    worker.postMessage({
      numbers: input.value.replace(/\s+/g, ' ').trim().split(' '),
      target: target.value
    })
    worker.onmessage = ({ data }) => {
      if (data.done) {
        count++
        if (count === workers.length) isStart.value = false
      } else {
        output.add(data.value)
      }
    }
    worker.onerror = (e) => {
      console.error(e)
    }
    worker.onmessageerror = (e) => {
      console.error(e)
    }
  })
}

function copyText(text: string) {
  return navigator.clipboard.writeText(text)
}
</script>

<template>
  <section class="mx-auto max-w-4xl rounded-md bg-white p-6 shadow-md dark:bg-gray-800">
    <h1 class="text-lg font-semibold capitalize text-gray-700 dark:text-white">24 点</h1>
    <form @submit.prevent="start">
      <div class="mt-4 grid grid-cols-1 gap-6 sm:grid-cols-2">
        <div>
          <label
            title="输入参与计算的数，空格隔开"
            class="block text-sm text-gray-500 dark:text-gray-300"
          >
            <div>输入</div>
            <input
              type="text"
              required
              v-model.trim.lazy="input"
              placeholder="输入参与计算的数，空格隔开"
              class="mt-2 block w-full rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-gray-700 placeholder-gray-400/70 outline-none transition focus:border-blue-400 focus:ring focus:ring-blue-300 focus:ring-opacity-40 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:placeholder-gray-500 dark:focus:border-blue-300"
            />
          </label>
        </div>
        <div>
          <label title="输入计算的结果" class="block text-sm text-gray-500 dark:text-gray-300">
            <div>结果</div>
            <input
              type="text"
              required
              v-model.trim.lazy="target"
              placeholder="输入计算的结果"
              class="mt-2 block w-full rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-gray-700 placeholder-gray-400/70 outline-none transition focus:border-blue-400 focus:ring focus:ring-blue-300 focus:ring-opacity-40 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:placeholder-gray-500 dark:focus:border-blue-300"
            />
          </label>
        </div>
      </div>
      <div class="mt-6 flex justify-end">
        <button
          class="transform rounded-md bg-gray-700 px-8 py-2.5 leading-5 text-white outline-none transition-colors duration-300 hover:bg-gray-600 focus:bg-gray-600"
          type="submit"
        >
          {{ isStart ? '停止' : '开始' }}
        </button>
      </div>
    </form>
  </section>
  <output
    class="mx-auto mt-4 grid max-w-4xl select-text grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3"
  >
    <div
      class="mx-auto cursor-pointer select-text break-words"
      v-for="e in output_end"
      @click="copyText(e)"
      :title="`点击复制 ${e}`"
    >
      {{ e }}
    </div>
  </output>
</template>

<style scoped>
.list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
  position: absolute;
}

.spread-enter-active,
.spread-leave-active {
  transition: all 0.5s ease;
  overflow: hidden;
}
.spread-enter-from,
.spread-leave-to {
  margin-block: 0;
  padding-block: 0;
  border-block-width: 0;
  outline-width: 0;
  height: 0;
  opacity: 0;
}
</style>
